import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { fetchStreams} from "../../actions";

class StreamList extends React.Component {
    componentDidMount() {
        this.props.fetchStreams();
    }

    renderAdmin(stream) {
        if (stream.userId === this.props.currentUserId) {
            return (
              <div className="right floated content">
                  <Link
                      to={`/streams/edit/${stream.id}`}
                      className="ui button primary">
                      编辑
                  </Link>
                  <Link
                      to={`/streams/delete/${stream.id}`}
                      className="ui button negative">
                      删除
                  </Link>
              </div>
            );
        }
    }

    renderList() {
        return this.props.streams.map(stream => {
           return (
               <div className="item" key={stream.id}>
                   {this.renderAdmin(stream)}
                   <i className="large middle aligned icon camera" />
                   <div className="content">
                       <Link to={`/streams/${stream.id}`} className="header">
                           {stream.title}
                       </Link>
                       <div className="description">
                           {stream.description}
                       </div>
                   </div>
               </div>
           )
        });
    }

    renderCreate() {
        if (this.props.isSignedIn) {
            return (
                <div style={{ textAlign: 'right' }}>
                    <Link to="/streams/new" className="ui button primary">
                        创建直播
                    </Link>
                </div>
            );
        }
    }

    render() {
        return (
            <div>
                <h2>直播列表</h2>
                <div className="ui celled list">
                    {this.renderList()}
                </div>
                {this.renderCreate()}
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        streams: Object.values(state.streams),
        currentUserId: state.auth.userId,
        isSignedIn: state.auth.isSignedIn
    };
}

export default connect(mapStateToProps, {fetchStreams})(StreamList);